<template>
   <!-- 任务评价 -->
  <div class="div-background-TaskEvaluation">
    <div>
      <img src="@/assets/img/other/icon-任务评价.png" class="img-TaskEvaluation" /><span
        class="user-TaskEvaluation-span"
        >任务评价</span
      >
    </div>
    <div class="TaskEvaluation-all" v-if="State.EvaluationEmptyBoolean">
      <div class="TaskEvaluation-bestdifficult">
        <span class="TaskEvaluation-number">{{State.TaskEvaluation.lv4 ? State.TaskEvaluation.lv4 : 0}}</span>
        <span class="TaskEvaluation-text">无从下手</span>
      </div>
      <div class="TaskEvaluation-difficult">
        <span class="TaskEvaluation-number">{{State.TaskEvaluation.lv3 ? State.TaskEvaluation.lv3 : 0}}</span>
        <span class="TaskEvaluation-text">困难</span>
      </div>
      <div class="TaskEvaluation-easy">
        <span class="TaskEvaluation-number">{{State.TaskEvaluation.lv2 ? State.TaskEvaluation.lv2 : 0}}</span>
        <span class="TaskEvaluation-text">简单</span>
      </div>
      <div class="TaskEvaluation-normol">
        <span class="TaskEvaluation-number">{{State.TaskEvaluation.lv1 ? State.TaskEvaluation.lv1 : 0}}</span>
        <span class="TaskEvaluation-text">容易</span>
      </div>
    </div>
    <div v-else class="TaskEvaluation-all-No">
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script>
import { defineComponent,reactive} from "vue";
import bus from '@/bus.js'
export default defineComponent({
  name: "HomeTaskEvaluation",
  components: {},
  setup() {
      let State = reactive({
        TaskEvaluation:{
          lv1:0,
          lv2:0,
          lv3:0,
          lv4:0
        },
        EvaluationEmptyBoolean:false,
    })
    bus.$off('TaskEvaluation')
    //不同组件传值
    bus.$on('TaskEvaluation', (data) => {
      if(data==='empty'){
        State.EvaluationEmptyBoolean =false
      }else{
        State.EvaluationEmptyBoolean =true
        State.TaskEvaluation = data
      }
    })
    return {
      State
    };
  },
});
</script>
<style lang="less">
.div-background-TaskEvaluation {
  position: absolute;
  width: 430px;
  height: 180px;
  top: calc(100% - 190px);
  border-radius: 16px;
  background-color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

.div-background-TaskEvaluation {
  left: 980px;
}
.img-TaskEvaluation {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 19px;
  top: 19px;
}
.user-TaskEvaluation-span {
  position: absolute;
  left: 0px;
  top: 18px;
  width: 180px;
  height: 24px;
  font-size: 18px;
  color: #81859c;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
.TaskEvaluation-all span {
  display: block;
  text-align: center;
  padding-top: 33px;
}
.TaskEvaluation-bestdifficult {
  position: absolute;
  left: 40px;
  top: 30px;
}
.TaskEvaluation-difficult {
  position: absolute;
  left: 155px;
  top: 30px;
}
.TaskEvaluation-easy {
  position: absolute;
  left: 250px;
  top: 30px;
}
.TaskEvaluation-normol {
  position: absolute;
  left: 335px;
  top: 30px;
}
.TaskEvaluation-number {
  font-size: 30px;
  color: #218cde;
}
.TaskEvaluation-text {
  font-size: 18px;
  color: #81859c;
  font-weight: 400;
}
.TaskEvaluation-all-No{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #81859c;
}
</style>
